<script setup>
// TODO: 下面库随意导入的(delete)
/* 导入 */
import { useRouter } from "vue-router";
import { watch, ref } from "vue";
import { useTownStore } from "@/stores";
import ArticleListContainer from "@/views/home/components/ArticleListContainer.vue";

/* 数据 */
const townStore = useTownStore();
const townName = ref("");

/* 侦听 */
watch(
  () => townStore.currentTown,
  (newTown) => {
    if (newTown) {
      townName.value = newTown.townname;
    }
  },
  { immediate: true }, // 这里的 immediate: true 确保在初次加载时也能触发
);
</script>

<template>
  <div id="newsPage">
    <el-card style="max-width: 100vw" shadow="hover">
      <template #header>
        <h2>小镇文化 <el-text class="mx-1" type="danger"></el-text></h2>
      </template>
      <ArticleListContainer :town="townName" :sort="'文化'" />
    </el-card>
  </div>
</template>

<style scoped>
#newsPage {
  text-align: center;
}
</style>
